@import url('./uploadFile/uploadFileButtonIcon.css');
@import url('./microphone/transcriptionText.css');
@import url('./microphone/microphoneButton.css');
@import url('./submit/submitButton.css');
@import url('./tooltip/tooltip.css');

.input-button {
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 0.2em;
  user-select: none;
}

.input-button-svg {
  width: 1.65em;
  height: 1.65em;
}

.input-button-svg-text {
  padding: 1px;
  height: 1.65em;
  display: flex;
}

.input-button-svg-text > svg {
  padding: 0.22rem;
}

.input-button-svg-text > div {
  margin-inline-start: 2px;
}

.input-button:hover,
.input-button:focus-visible {
  background-color: #9c9c9c2e;
}

.input-button:active {
  background-color: #9c9c9c5e;
}

/* Bug fix for when the user clicks on a button then drags away the mouse which used to still display :active css */
/* which applied default active css instead of user custom active css */
.input-button:active:not(:hover) {
  background-color: transparent;
}

.loading-button {
  cursor: auto;
}

.loading-button:hover {
  background-color: unset;
}

.text-button {
  filter: unset !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: 4px;
  height: 1.6em;
  width: max-content;
}

#custom-icon {
  height: 100%;
  width: 1.2em;
}

.custom-button-container-default {
  color: #505050;
}

.custom-button-container-default > .dropup-menu-item-icon {
  color: unset;
}

.custom-button-container-default > svg {
  filter: brightness(0) saturate(100%) invert(39%) sepia(1%) saturate(0%) hue-rotate(83deg) brightness(93%) contrast(90%);
}

.custom-button-container-default > .dropup-menu-item-icon > svg {
  position: absolute;
  inset-inline-start: 0.2em;
}

.custom-button-container-active {
  background-color: #edf7ff;
  color: #0285ff;
}

.custom-button-container-active:hover,
.custom-button-container-active:focus-visible {
  background-color: #def0ff;
}

.custom-button-container-active:active {
  background-color: #d2eaff;
}

.custom-button-container-active > svg {
  filter: brightness(0) saturate(100%) invert(32%) sepia(34%) saturate(4196%) hue-rotate(196deg) brightness(107%)
    contrast(104%);
}

.custom-button-container-disabled {
  color: #aeaeae;
  cursor: auto;
}

.custom-button-container-disabled > div {
  pointer-events: none;
}

.custom-button-container-disabled:hover,
.custom-button-container-disabled:focus-visible {
  background-color: transparent;
}

.custom-button-container-disabled:active {
  background-color: transparent;
}

.custom-button-container-disabled > svg {
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(818%) hue-rotate(28deg) brightness(102%)
    contrast(100%);
}
